<template>
  <div class="dd">
    <Card title="业务介绍">
      <p>
        双跨融合通信客户端是为企业客户提供融合通信业务的客户端产品，提供的包括语音/视频通话、
        统一Centrex、多媒体会议、PGM、电子传真、点击拨号的客户端软件产品。其发展目标是成为
        中国移动面向企业客户的第一桌面，面向用户提供统一渠道、统一入口。
      </p>
    </Card>
    <Card title="基本信息">
      <el-form size="small" inline label-width="120px" :model="formA">
        <el-form-item label="客户名称">
          <el-input v-model="formA.valA"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="hanleClick"
            >选取客户</el-button
          >
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="formA.valB"></el-input>
        </el-form-item>
        <el-form-item label="客户所在省">
          <el-input v-model="formA.valC"></el-input>
        </el-form-item>
        <el-form-item label="客户所在市">
          <el-input v-model="formA.valD"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="业务资费">
      <el-radio-group
        v-model="checkedVal"
        style="margin-left: 20px; margin-bottom: 20px"
      >
        <el-radio v-for="item in valGroup" :label="item" :key="item">
          {{ item }}
        </el-radio>
      </el-radio-group>
      <br />
      <el-checkbox-group v-model="checkedValB" :max="1">
        <el-checkbox v-for="item in valGroupB" :label="item" :key="item">
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
      <el-select size="mini" v-model="val" style="margin-left: 20px">
        <el-option label="截止到本月有效" :value="1"> </el-option>
        <el-option label="截止到下下月有效" :value="2"> </el-option>
        <el-option label="截止到下月有效" :value="3"> </el-option>
      </el-select>
      <section
        v-if="checkedVal || checkedValB.length !== 0"
        style="margin-top: 20px"
      >
        <Card title="资费收取">
          <el-form inline size="small" :model="formB">
            <el-form-item label="资费生效日期">
              <el-select :value="1" size="small" v-model="formB.valA">
                <el-option label="当日生效" :value="1"> </el-option>
                <el-option label="次日生效" :value="2"> </el-option>
                <el-option label="次月生效" :value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付方式">
              <el-select :value="1" size="small" v-model="formB.valB">
                <el-option label="有限公司一点受理，一点支付" :value="1">
                </el-option>
                <el-option label="有限公司一点受理，分省支付" :value="2">
                </el-option>
                <el-option label="主办省一点受理，一点支付" :value="3">
                </el-option>
                <el-option label="主办省一点受理，分省支付" :value="4">
                </el-option>
                <el-option label="本省受理，本省支付" :value="5"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="签约主体">
              <el-select :value="1" size="small" v-model="formB.valC">
                <el-option label="集团公司" :value="1"> </el-option>
                <el-option label="集团政企分公司" :value="2"> </el-option>
                <el-option label="有限公司" :value="3"> </el-option>
                <el-option label="有限政企分公司" :value="4"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </Card>
      </section>
    </Card>
    <Card title="产品选择">
      <el-checkbox-group v-model="checkedValA" :max="max">
        <el-checkbox
          v-for="item in valGroupA"
          :label="item"
          :key="item"
          :disabled="item === disabled"
        >
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
      <section v-if="checkedValA.length !== 0" style="margin-top: 20px">
        <Card title="业务属性">
          <el-form inline size="small" :model="formC">
            <el-form-item label="姓名">
              <el-input v-model="formC.valA"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="formC.valB"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formC.valC"></el-input>
            </el-form-item>
          </el-form>
        </Card>
      </section>
    </Card>
    <Card title="其他信息">
      <el-form size="small" inline label-width="120px" :model="formD">
        <el-form-item label="受理业务员">
          <el-input v-model="formD.valA"></el-input>
        </el-form-item>
        <el-form-item label="员工编号">
          <el-input v-model="formD.valB"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formD.valC"></el-input>
        </el-form-item>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
export default {
  components: {
    Card
  },

  data() {
    return {
      val: '',
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formB: {
        valA: 1,
        valB: 1,
        valC: 1
      },
      formC: {
        valA: '',
        valB: '',
        valC: ''
      },
      formD: {
        valA: '',
        valB: '',
        valC: ''
      },
      show: false,
      checkedVal: '',
      valGroup: [
        '标准收费',
        '按时收费（每分钟0.1元）',
        '按天计费（每天1元）',
        '包月收费（100元1000分钟）',
        '语音次数限制'
      ],
      checkedValB: [],
      valGroupB: ['测试期资费'],
      checkedValA: [],
      valGroupA: ['集团固话', '多媒体会议', '语音会议', '定向流量'],
      max: 1,
      disabled: ''
    }
  },

  created() {
    this.$bus.$on('changeData', val => {
      if (val === 0) {
        this.max = 1
        this.checkedValA = []
        this.disabled = ''
      }
      if (val === 1) {
        this.max = 2
        this.checkedValA = ['集团固话']
        this.disabled = '集团固话'
      }
    })
  },

  methods: {
    hanleClick() {
      this.$emit('hanlePer', true)
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
.el-checkbox-group {
  display: inline-block;
  margin-left: 20px;
}
</style>
